<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>科创课程（电动发球机）报名表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #3183E0;
            --background-color: #E7F3FF;
            --hover-color: #2a73c9;
            --focus-shadow: 0 0 0 0.2rem rgba(49, 131, 224, 0.25);
            --error-color: #dc3545;
            --success-color: #28a745;
            --warning-color: #ffc107;
        }
        
        body {
            background-color: var(--background-color);
        }
        
        .container { 
            max-width: 100%;
            padding: 15px;
        }
        
        @media (min-width: 768px) {
            .container {
                max-width: 600px;
            }
        }
        
        .form-group {
            margin-bottom: 1rem;
        }
        
        .card {
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border: none;
        }
        
        .card-header {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background-color: var(--primary-color);
            text-align: center; /* 标题居中 */
            padding: 15px; /* 增加上下内边距 */
        }
        
        /* 标题样式优化 */
        .card-header h3 {
            word-break: keep-all; /* 防止"报名表"被拆分 */
            white-space: normal;
            overflow-wrap: break-word;
            margin: 0; /* 重置边距 */
            font-weight: 500; /* 稍微减轻字体粗细 */
        }
        
        .title-part {
            white-space: nowrap; /* 确保"报名表"三个字不被拆分 */
            display: inline-block;
        }
        
        .btn-primary {
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
            background-color: var(--hover-color) !important;
            border-color: var(--hover-color) !important;
        }
        
        .btn-primary:focus {
            box-shadow: var(--focus-shadow) !important;
        }
        
        input.form-control, textarea.form-control, select.form-control {
            padding: 10px;
            font-size: 16px; /* 防止iOS上自动缩放 */
            border-color: #ced4da;
        }
        
        input.form-control:focus, textarea.form-control:focus, select.form-control:focus {
            border-color: var(--primary-color);
            box-shadow: var(--focus-shadow);
        }
        
        /* 下拉框样式优化 */
        select.form-control {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 16px 12px;
            padding-right: 30px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        select.form-control:hover {
            border-color: var(--primary-color);
        }
        
        .select-wrapper {
            position: relative;
        }
        
        .select-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 40px;
            pointer-events: none;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        
        .error { 
            color: var(--error-color); 
            font-size: 0.9em;
            margin-top: 5px;
        }
        
        .is-invalid {
            border-color: var(--error-color) !important;
            padding-right: calc(1.5em + 0.75rem);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }
        
        .invalid-feedback {
            display: none;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 0.875em;
            color: var(--error-color);
        }
        
        /* 自定义提示框样式 */
        .toast-container {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            width: 90%;
            max-width: 450px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .custom-toast {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            font-size: 14px;
            margin-bottom: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            animation: slideDown 0.4s ease-out forwards;
        }
        
        .toast-header {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            color: white;
            font-weight: 500;
        }
        
        .toast-body {
            padding: 15px;
            background-color: white;
        }
        
        .toast-success .toast-header {
            background-color: var(--success-color);
        }
        
        .toast-error .toast-header {
            background-color: var(--error-color);
        }
        
        .toast-warning .toast-header {
            background-color: var(--warning-color);
        }
        
        .toast-icon {
            margin-right: 8px;
            font-size: 18px;
        }
        
        .toast-close {
            margin-left: auto;
            cursor: pointer;
            color: white;
            opacity: 0.8;
            font-size: 20px;
            line-height: 1;
        }
        
        .toast-close:hover {
            opacity: 1;
        }
        
        @keyframes slideDown {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        @keyframes fadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }
        
        /* 针对超小屏幕的优化 */
        @media (max-width: 320px) {
            h3 {
                font-size: 1.25rem;
            }
            
            .card-body {
                padding: 1rem;
            }
            
            .toast-container {
                width: 95%;
                max-width: none;
                padding: 0 5px;
            }
        }
    </style>
</head>
<body>
    <div class="container mt-3 mt-md-5">
        <div class="card">
            <div class="card-header text-white">
                <h3>科创课程（电动发球机）<span class="title-part">报名表</span></h3>
            </div>
            <div class="card-body">
                <form id="registrationForm" th:action="@{/register}" th:object="${registration}" method="post" novalidate>
                    <div class="form-group">
                        <label for="studentName">学生姓名</label>
                        <input type="text" class="form-control" id="studentName" th:field="*{studentName}" required autocomplete="name">
                        <div class="invalid-feedback">请填写学生姓名</div>
                    </div>
                    <div class="form-group">
                        <label for="grade">年级</label>
                        <div class="select-wrapper">
                            <select class="form-control" id="grade" th:field="*{grade}" required>
                                <option value="">请选择年级</option>
                                <option value="小学一年级">小学一年级</option>
                                <option value="小学二年级">小学二年级</option>
                                <option value="小学三年级">小学三年级</option>
                                <option value="小学四年级">小学四年级</option>
                                <option value="小学五年级">小学五年级</option>
                                <option value="小学六年级">小学六年级</option>
                                <option value="初中一年级">初中一年级</option>
                                <option value="初中二年级">初中二年级</option>
                                <option value="初中三年级">初中三年级</option>
                                <option value="高中一年级">高中一年级</option>
                                <option value="高中二年级">高中二年级</option>
                                <option value="高中三年级">高中三年级</option>
                            </select>
                        </div>
                        <div class="invalid-feedback">请选择年级</div>
                    </div>
                    <div class="form-group">
                        <label for="parentName">家长姓名</label>
                        <input type="text" class="form-control" id="parentName" th:field="*{parentName}" required>
                        <div class="invalid-feedback">请填写家长姓名</div>
                    </div>
                    <div class="form-group">
                        <label for="contactPhone">联系方式</label>
                        <input type="tel" class="form-control" id="contactPhone" th:field="*{contactPhone}" required inputmode="tel" autocomplete="tel" placeholder="请输入手机号码" pattern="^1[3-9]\d{9}$">
                        <div class="invalid-feedback">请输入正确的11位手机号码</div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">提交报名</button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 提示框容器 -->
    <div class="toast-container"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 检查用户是否已经报名
            function checkRegistration() {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = cookies[i].trim();
                    if (cookie.indexOf('registration_completed=true') === 0) {
                        // 用户已报名，跳转到成功页面
                        window.location.href = '/success';
                        return;
                    }
                }
            }
            
            // 页面加载时检查报名状态
            checkRegistration();
            
            // 设置Cookie函数
            function setCookie(name, value, days) {
                var expires = "";
                if (days) {
                    var date = new Date();
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                    expires = "; expires=" + date.toUTCString();
                }
                document.cookie = name + "=" + (value || "") + expires + "; path=/";
            }
            
            // 手机号输入验证
            $('#contactPhone').on('input', function() {
                validatePhone(this);
            });
            
            // 下拉框优化
            $('#grade').on('change', function() {
                if ($(this).val() !== '') {
                    $(this).css('color', '#2c3e50');
                } else {
                    $(this).css('color', '');
                }
            });
            
            // 初始化下拉框颜色
            if ($('#grade').val() !== '') {
                $('#grade').css('color', '#2c3e50');
            }
            
            // 表单提交验证
            $('#registrationForm').on('submit', function(e) {
                e.preventDefault();
                
                // 主动触发验证
                validateForm();
                
                // 检查验证结果
                if ($('.is-invalid').length > 0) {
                    // 存在无效输入，滚动到第一个错误字段
                    $('html, body').animate({
                        scrollTop: $('.is-invalid:first').offset().top - 100
                    }, 200);
                    
                    // 显示错误提示
                    showToast('error', '验证失败', '请完善表单信息');
                    return false;
                }
                
                // 获取手机号码
                var phoneNumber = $('#contactPhone').val();
                
                // 设置手机号码Cookie，有效期30天
                setCookie('user_phone', phoneNumber, 30);
                
                // 禁用提交按钮，防止重复提交
                var submitBtn = $(this).find('button[type="submit"]');
                submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 提交中...');
                
                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        if (response.success) {
                            // 如果有重定向URL，则跳转
                            if (response.redirectUrl) {
                                window.location.href = response.redirectUrl;
                            } else {
                                showToast('success', '提交成功', response.message);
                                $('#registrationForm')[0].reset();
                                $('#grade').css('color', ''); // 重置下拉框颜色
                            }
                        } else {
                            showToast('error', '提交失败', response.message);
                            // 恢复提交按钮状态
                            submitBtn.prop('disabled', false).html('提交报名');
                        }
                    },
                    error: function() {
                        showToast('error', '系统错误', '提交失败，请稍后重试');
                        // 恢复提交按钮状态
                        submitBtn.prop('disabled', false).html('提交报名');
                    }
                });
            });
            
            // 验证手机号
            function validatePhone(input) {
                var phoneRegex = /^1[3-9]\d{9}$/;
                var isValid = phoneRegex.test(input.value);
                
                if (isValid) {
                    $(input).removeClass('is-invalid');
                    return true;
                } else {
                    $(input).addClass('is-invalid');
                    $(input).next('.invalid-feedback').show();
                    return false;
                }
            }
            
            // 验证整个表单
            function validateForm() {
                // 验证学生姓名
                if ($('#studentName').val().trim() === '') {
                    $('#studentName').addClass('is-invalid');
                    $('#studentName').next('.invalid-feedback').show();
                } else {
                    $('#studentName').removeClass('is-invalid');
                }
                
                // 验证年级
                if ($('#grade').val() === '') {
                    $('#grade').addClass('is-invalid');
                    $('#grade').next('.invalid-feedback').show();
                } else {
                    $('#grade').removeClass('is-invalid');
                }
                
                // 验证家长姓名
                if ($('#parentName').val().trim() === '') {
                    $('#parentName').addClass('is-invalid');
                    $('#parentName').next('.invalid-feedback').show();
                } else {
                    $('#parentName').removeClass('is-invalid');
                }
                
                // 验证手机号
                validatePhone(document.getElementById('contactPhone'));
            }
            
            // 显示自定义提示框
            function showToast(type, title, message) {
                var iconClass, toastClass;
                
                switch(type) {
                    case 'success':
                        iconClass = 'fas fa-check-circle';
                        toastClass = 'toast-success';
                        break;
                    case 'error':
                        iconClass = 'fas fa-exclamation-circle';
                        toastClass = 'toast-error';
                        break;
                    case 'warning':
                        iconClass = 'fas fa-exclamation-triangle';
                        toastClass = 'toast-warning';
                        break;
                    default:
                        iconClass = 'fas fa-info-circle';
                        toastClass = '';
                }
                
                var toast = $('<div class="custom-toast ' + toastClass + '"></div>');
                var header = $('<div class="toast-header"><i class="' + iconClass + ' toast-icon"></i><span>' + title + '</span><span class="toast-close">&times;</span></div>');
                var body = $('<div class="toast-body">' + message + '</div>');
                
                toast.append(header).append(body);
                $('.toast-container').append(toast);
                
                // 点击关闭按钮
                toast.find('.toast-close').on('click', function() {
                    var toastElement = $(this).closest('.custom-toast');
                    toastElement.css('animation', 'fadeOut 0.3s forwards');
                    setTimeout(function() {
                        toastElement.remove();
                    }, 300);
                });
                
                // 自动关闭
                setTimeout(function() {
                    if (toast.length) {
                        toast.css('animation', 'fadeOut 0.3s forwards');
                        setTimeout(function() {
                            toast.remove();
                        }, 300);
                    }
                }, 5000);
            }
        });
    </script>
</body>
</html>